<template>
  <page-wrap stay-still back hide-tab title="简历模板">
    <view class="template-box">
      <u-row gutter="24" justify="space-around">
        <u-col span="4" v-for="item in templateList" :key="item.value">
          <view @click="previewTemplate(item)">
            <image :src="item.url" class="img"></image>
            <view class="desc">{{ item.desc }}</view>
          </view>
        </u-col>
      </u-row>
      <u-popup v-model="show" mode="bottom" height="100vh" closeable>
        <view class="preview">
          <view class="img-box">
            <u-image
              :src="currentTemplate.url"
              mode="widthFix"
              width="90vw"
            ></u-image>
          </view>
          <view class="produce-btn">
            <view class="btn" @click="selectTemplate">选择此模板</view>
          </view>
        </view>
      </u-popup>
      <u-popup v-model="showWish" mode="bottom" height="90vh" closeable>
        <view class="preview">
          <view class="wishContent">
            <view class="title">选择求职意向</view>
            <view class="desc" v-if="allAimList.length != 0"
              >这份简历用于哪个求职意向</view
            >
            <view class="card" v-for="(item, index) in allAimList" :key="index">
              <view class="cardLeft">
                <view class="cardLeft_title">{{ item.zwname }}</view>
                <view class="cardLeft_money"
                  >{{ item.salary_str }} | {{ item.cityName }}</view
                >
                <view class="cardLeft_type">{{ item.tradeName }}</view>
              </view>
              <view class="cardRight">
                <button class="chooseBtn" @click="chooseWish(item)">
                  选择
                </button>
              </view>
            </view>
            <view class="empty" v-if="allAimList.length == 0"
              >暂无求职意向，请前往个人资料选择求职意向</view
            >
          </view>
        </view>
      </u-popup>
    </view>
  </page-wrap>
</template>

<script>
import ShareMixin from '@/mixins/share';
import { getMyIntendedTradeList } from '@/api/index';
import {
  createResumePdf,
  getPersonResumeAttachment
} from '@/api/modules/resumeCreate';
export default {
  mixins: [ShareMixin],
  components: {},
  data() {
    return {
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      templateImg: this.$imgBase + 'resume/template.png',
      show: false,
      showWish: false,
      currentTemplate: {},
      templateList: [
        {
          value: 1,
          url: this.$imgBase + 'resume/template2.png',
          desc: '深蓝通用简历'
        }
      ],
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      allAimList: [],
      timer: null,
      startTime: 0 // 初始开始请求时间
    };
  },
  created() {},
  methods: {
    chooseWish(item) {
      let param = {
        personId: this.personId,
        temId: '1',
        attName: null,
        attType: '1',
        attStatus: '2',
        intendedId: item.intended_id
      };
      createResumePdf(param).then((res) => {
        if (+res.code === 200 && res.data.presentResumeNum < 3) {
          uni.showToast({ icon: 'none', title: '简历提交成功' });
          uni.showLoading({
            title: '简历正在生成',
            mask: true
          });
          this.startTime = new Date().getTime();
          this.getResumeTime();
        } else if (res.data && res.data.presentResumeNum >= 3) {
          uni.showToast({ icon: 'none', title: '简历附件数量超过限制' });
        } else {
          uni.showToast({ icon: 'none', title: res.status_desc });
        }
      });
    },
    getResumeTime() {
      clearTimeout(this.timer); // 清除定时器
      // 超过30分钟则停止轮询
      if (new Date().getTime() - this.startTime > 30 * 1000) {
        clearTimeout(this.timer);
        uni.showToast({ icon: 'none', title: '服务器繁忙，请稍后重试' });
        return;
      }
      // 3s一次, 轮询中
      this.timer = setTimeout(() => {
        this.getResume(); // 调用轮询
      }, 2000);
    },
    getResume() {
      let param = {
        personId: this.personId,
        temId: '1'
      };
      getPersonResumeAttachment(param)
        .then((res) => {
          if (res && res.data.attUrl) {
            console.log('成功了');
            uni.hideLoading();
            clearTimeout(this.timer);
            uni.navigateTo({
              url: `/pagesSub/resume/resumeTemplate/resumeDetail/index?id=${
                res.data.id
              }&attPic=${encodeURIComponent(res.data.attPic)}`
            });
          } else {
            // uni.hideLoading();
            // clearTimeout(this.timer);
            // uni.navigateTo({
            //   url: `/pagesSub/resume/resumeTemplate/resumeDetail/index?id=${res.data.id}&attUrl=${res.data.attUrl}`,
            // });
            // 没成功,调用轮询
            this.getResumeTime();
          }
        })
        .catch((err) => {
          // 请求错误,也继续轮询
          this.getResumeTime();
        });
    },
    selectTemplate() {
      this.getMyIntendedTradeList();
      console.log('选择此模板');
      this.show = false;
      this.showWish = true;
    },
    getMyIntendedTradeList() {
      let param = {
        person_id: this.personId
      };
      getMyIntendedTradeList(param).then((res) => {
        if (+res.code === 200) {
          this.allAimList = res.data.myTended || [];
        }
      });
    },
    previewTemplate(item) {
      this.currentTemplate = item;
      this.show = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.template-box {
  padding: 32rpx 24rpx;
  .img {
    width: 200rpx;
    height: 300rpx;
  }
  .desc {
    text-align: center;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
    margin-bottom: 24rpx;
  }
}
.preview {
  position: relative;
  .img-box {
    text-align: center;
  }
  .produce-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 32rpx;
    position: fixed;
    bottom: 0rpx;
    padding-bottom: calc(2rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(2rpx + env(safe-area-inset-bottom));
    .btn {
      width: 100%;
      background: #f75a3e;
      color: #fff;
      font-size: 14px;
      height: 80rpx;
      line-height: 80rpx;
      margin-bottom: 20rpx;
    }
  }
  .wishContent {
    padding: 60rpx;
    min-height: 800rpx;
    .title {
      font-size: 22px;
      font-weight: 600;
    }
    .desc {
      color: #6b6b6b;
      margin: 20rpx 0;
    }
    .card {
      margin-bottom: 20rpx;
      box-shadow: 0px 5px 20px #e0dfdf;
      border-radius: 10rpx;
      display: flex;
      height: 200rpx;
      padding: 20rpx 20rpx 20rpx 34rpx;

      .cardRight {
        width: 220rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .chooseBtn {
          color: #fff;
          background: #f75a3e;
          border: none;
          width: 180rpx;
          height: 70rpx;
          line-height: 70rpx;
          font-size: 16px;
        }
      }
      .cardLeft {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .cardLeft_title {
          font-size: 16px;
          font-weight: 900;
        }
        .cardLeft_money {
          font-size: 14px;
          color: #5f5d5d;
        }
        .cardLeft_type {
          font-size: 12px;
          color: #888;
        }
      }
    }
  }
}
.empty {
  text-align: center;
  font-size: 15px;
  margin-top: 50rpx;
  color: #6b6b6b;
}
::v-deep .u-image__image {
  margin: 80rpx 40rpx 120rpx 40rpx;
}
</style>
